<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 300px;
				height: 300px;
				background-color: #BBFFAA;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: yellow;

				/*
				1、子元素和父元素外边距相邻，子元素的外边距会传递给父元素的外边距。
				2、使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。
				*/
				margin-top: 100px;
			}		
			
			
			.box3{
				border: 10px red solid;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				float: left;
			}
			
			/*
			解决父子元素外边距重叠
				相当于在box1中立刻添加一个子元素，这个子元素为table，可以隔开父子边距。
			*/
			/* .box1:before{
				content: "";
				display: table;
			} */
			
			/*
			解决父元素高度塌陷
			*/
			/* .clearfix:after{
				content: "";
				display: block;
				clear: both;
			} */
			
			/*
			clearfix的功能为：
			1、解决高度塌陷问题
			2、解决父子元素外边距问题
			*/
		   .clearfix:before,
		   .clearfix:after{
			   content: "";
			   display: table;
			   clear: both;
		   }
		   
		   /*兼容IE6*/
		   .clearfix{
			   zoom: 1;
		   }
		</style>
	</head>
	<body>
		<!-- 
		H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频5 《84.尚硅谷_HTML&CSS基础_完善clearfix》
		-->
		<div class="box3 clearfix">			
			<div class="box4"></div>
		</div>
		<div class="box1 clearfix">
			<div id="">
				<!-- 空的div无法隔开相邻的父子元素 -->
			</div>
			<div class="box2"></div>
		</div>
	</body>
</html>
